<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML5 拖放实例</title>
    <style>
        div {
            width: 500px;
            height: 200px;
            border: 1px solid #ccc;
            background-color: green;
            text-align: center;
        }

        span {
            display: block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>
        function zuzhi(e) {
            e.preventDefault();
        }

        function drag(e) {
            e.dataTransfer.setData("Text", e.target.id);
        }

        function drop(e) {
            e.preventDefault();
            var data = e.dataTransfer.getData("Text");
            e.target.appendChild(document.getElementById(data));
        }
    </script>
</head>

<body>
    <div ondrop="drop(event)" ondragover="zuzhi(event)">容器</div>
    <span id="drag1" draggable="true" ondragstart="drag(event)">可拖动</span>
</body>

</html>